/*
 * @Author: wwssaabb
 * @Date: 2021-02-27 08:18:45
 * @LastEditTime: 2021-03-03 16:27:38
 * @FilePath: \sass_demo\Visual Block\js\main_test.js
 */

const base_width=1920
const base_height=938
const img_wh=(3840/2160).toFixed(5)

let btn=document.getElementsByClassName('btn')[0]
let text=document.getElementsByClassName('text')[0]
let bg=document.getElementsByClassName('bg-img')[0]
let h1=document.getElementsByTagName('h1')[0]
let h1_h=h1.offsetHeight
let text_h=text.offsetHeight
let mouseout_timer=null
btn.style=`height:${30/img_wh}vw;`
text.style='bottom:-'+(h1_h+60)/base_height*100+'vh;'
h1.style='text-align:center;transition:1s ease;'


btn.addEventListener('mousemove',(e)=>{
  clearTimeout(mouseout_timer)//清除恢复原位定时器
  mouseout_timer=null
  text.style='bottom:-10px;transition:1s ease;'
  let w_h=(btn.offsetWidth/2).toFixed(2)
  let h_h=(btn.offsetHeight/2).toFixed(2)
  let x=e.pageX-btn.offsetLeft
  let y=e.pageY-btn.offsetTop
  const ax_scale=(20/w_h).toFixed(5) //20为最大旋转角度,最后得到的是角度和宽的比值
  const ay_scale=(20/h_h).toFixed(5)
  let final_xR=(x-w_h)*ax_scale
  let final_yR=(h_h-y)*ay_scale
  btn.style=`height:${30/img_wh}vw;transform:rotateX(${final_yR}deg) rotateY(${final_xR}deg);`
  bg.style=`transform:translateX(${-(x-w_h)*(51/w_h).toFixed(5)}px) translateY(${(h_h-y)*(30/h_h).toFixed(5)}px);`
})
btn.addEventListener('mouseout',(e)=>{
  mouseout_timer=setTimeout(()=>{
    bg.style=`transform:translateX(0px) translateY(0px);transition:1s ease;`
    text.style='bottom:-'+(h1_h+60)/base_height*100+'vh;transition:1s ease;'
    btn.style=`height:${30/img_wh}vw;transform:rotateX(0deg) rotateY(0deg);transition:1s ease;background-position:50% 50%;`
  },1000)
  console.log(mouseout_timer)
})
